
<div class="form-group">
    <label class="control-label col-xs-2">
        商品库存
    </label>
    <div class="col-xs-9">
        <input type="number" class="form-control" maxlength="11" name="stock" placeholder="请输入商品库存">
        <div class="notice_tit">库存为0则为已售罄，前台不显示</div>
    </div>
</div>


<div class="form-group">
    <label class="control-label col-xs-2">是否启用规格</label>
    <div class="col-xs-9">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default ">
                <input type="radio" name="use_spec" id="use_spec_1" value="1"> 启用
            </label>
            <label class="btn btn-default active">
                <input type="radio" name="use_spec" id="use_spec_0" value="0" checked> 不启用
            </label>

        </div>
    </div>
</div>
<div id="spec_container" style="display: none">
    <div class="form-group">
        <label class="control-label col-xs-2">规格</label>
        <div class="col-xs-9">
            <div class="btn-group" data-toggle="buttons">
                <div class="row">
                    <div class="col-xs-8">
                        <input placeholder="请输入规格标题" type="text" maxlength="20" id="spec_name" name="spec_name" class="form-control" value="" />
                    </div>
                    <div class="col-xs-4">
                        <button onclick="add_spec_detail()" type="button" class="btn btn-success btn-block">添加规格</button>
                    </div>
                </div>
                <div class="notice_tit">启用商品规格后，商品的价格及库存以商品规格为准</div>
            </div>
        </div>
    </div>

    <div id="spec_detail" style="display: none" class="form-group">
        <label class="control-label col-xs-2"></label>
        <div class="col-xs-9">
            <table class="table table-bordered table-striped">
                <thead id="thead">

                </thead>
                <tbody id="tbody">

                </tbody>
                <input type="hidden" id="tr_max" value="0" />
            </table>
        </div>
    </div>
</div>
<style>
    .spec_img_con{position: relative;width:70px;height:70px;margin: 5px; }
    .spec_img_con input {display:block;width:0;height: 0;border: none;opacity: 0;position: absolute;left: 0;top: 0;}
    .spec_img_con img{display: block;width: 70px;height: 70px;cursor: pointer;position: absolute;left: 0;top: 0;}
</style>
<script>
    $("input[name=use_spec]").change(function () {
        var use_spec = $(this).val();
        if(use_spec==1){
            //启用
            $("#spec_container").show();
        }else{
            //不启用
            $("#spec_container").hide();
        }
    });
    function add_spec_detail() {
        var spec_name = $("#spec_name").val();
        if(spec_name == ''){
            showErrorMessage('请先输入规格标题');
            return false;
        }

        $("#spec_detail").show();
        var tr_num = $("#tr_max").val();
        tr_num++;
        $("#tr_max").val(tr_num);
        var tr = '<tr id="tr_'+tr_num+'" >'+
            '<td><div class="col-xs-12"><input type="text" class="form-control" maxlength="255" name="spec['+tr_num+'][title]" placeholder="请输入规格名称"></div></td>'+
            '<td>' +
            '<div class="col-xs-12">' +
            '<label class="spec_img_con">' +
            '<input onchange="imageUp(this,'+tr_num+')" type="file" class="form-control" accept="image/*" >' +
            '<img id="spec_img_'+tr_num+'" src="/static/images/up_def.png" />' +
            '<input id="spec_hid_'+tr_num+'" type="hidden" name="spec['+tr_num+'][img_url]">' +
            '</label>' +
            '</div>' +
            '</td>';

        tr += '<td><div class="col-xs-12"><input type="number" class="form-control" maxlength="11" name="spec['+tr_num+'][price]" placeholder="请输入售价"></div></td>'+
            '<td><div class="col-xs-12"><input type="number" class="form-control" maxlength="11" name="spec['+tr_num+'][original_price]" placeholder="请输入原价"></div></td>'+
            '<td><div class="col-xs-12"><input type="number" class="form-control" maxlength="11" name="spec['+tr_num+'][stock]" placeholder="请输入库存"></div></td>'+
            '<td><div class="col-xs-12"><button onclick="remove_spec_detail('+tr_num+')" type="button" class="btn btn-danger btn-block">删除此行</button></div></td>'+
            '</tr>';
        $("#tbody").append(tr);
    }
    
    function remove_spec_detail(tr_del_num) {
        $("#tr_"+tr_del_num).remove();
    }
    
    function imageUp(obj,tr_nums) {

        var filesize = (obj.files[0].size).toFixed(2);
        var max = "{:config('one_img_size')}";
        if(filesize>(max*1024)){
            showErrorMessage('图片请不要大于'+max+'KB');
            return false;
        }
        var docObj=$(obj).get(0);
        if (docObj.files && docObj.files[0]) {
            var formData = new FormData();
            formData.append("image",docObj.files[0]);
            $.ajax({
                url: "{:url('Utils/uploadSingleImage',array('name'=>'image'))}",
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                    if(data.status===0){
                        $("#spec_img_"+tr_nums).attr('src',data.url);
                        $("#spec_hid_"+tr_nums).val(data.url);
                    }else{
                        showErrorMessage(data.error);
                    }
                },
                error: function () {
                    showErrorMessage('图片上传控件有误');
                    return false;
                }
            });
        } else {
            showErrorMessage('请上传图片');
            return false;
        }
        return true;
    }
    
</script>





